<template>
  <div class="transfer" >
    <div class="transfer-left">
      <div class="transfer-body">
          <Tree
            ref="tree"
            :data="data"
            :render="renderContent">
          </Tree>
      </div>
    </div>



  </div>
</template>
<script>
  export default {
    name: 'mmTree',
    props:{
      data:{
        type:Array,
        required: true,
      },
      title: {
        type: String,
        default:"编辑"
      },
      modalWidth: {
        type: Number,
        default: 500
      },
    },
    data () {
      return {
        SelectClass: 'ivu-tree-title ivu-tree-title-selected',
        DefineClass: 'ivu-tree-title',
        selectedList: [],
        modalVisible:false,

      }
    },
    methods: {
      iconType (hasChild, expand) {
        let iconType = 'ios-document'
        if (hasChild) {
          if (expand) {
            iconType = 'ios-folder-open'
          } else {
            iconType = 'ios-folder'
          }
        } else {
          iconType = 'ios-document'
        }
        return iconType
      },
      cancelSelected () {
        this.traverseTree(this.data[0], this.selectedList[0].id, true)
        if(this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected').length !==0){
          this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected')[0].className = 'ivu-tree-title';
        }
      },
      traverseTree (node, id, isDel) {
        if (!node) {
          return
        }
        if (node.id === id) {
          if (isDel) {
            node.selected = false
          } else {
            node.selected = true
          }
        }
        let children = node.children
        if (children && children.length > 0) {
          for (let i = 0, l = children.length; i < l; i++) {
            this.traverseTree(children[i], id, isDel)
          }
        }
      },
      renderContent (h, { root, node, data }) {
          return h('div', {
              class: ['ivu-tree-title'],
              on: {
                click: (e) => {
                  if(this.selectedList.length !==0){
                    this.cancelSelected();
                  }
                  let thisClassName = e.target.className
                  let parentClassName = e.target.parentNode.className
                  if (thisClassName === this.SelectClass || parentClassName === this.SelectClass) {
                    node.node.selected = false
                    if (thisClassName === this.SelectClass) {
                      e.target.className = this.DefineClass
                    } else {
                      e.target.parentNode.className = this.DefineClass
                    }
                  } else {
                    node.node.selected = true
                    if (thisClassName === this.DefineClass) {
                      e.target.className = this.SelectClass
                    } else {
                      e.target.parentNode.className = this.SelectClass
                    }
                  }
                  this.OnSelect(node.node,e)
                }
              }
            },
            [
              h('Icon', {
                props: {
                  type: this.iconType(node.node.hasChild, node.node.expand)
                }
              }),
              h('span', data.title),
              h('Icon', {
                props: {
                  type: 'md-checkmark'
                }
              })
            ])
      },
      OnSelect (data,e) {
        this.$emit('OnSelectChange', data);
        this.$emit('dom',e);
        this.selectedList = [];
        this.selectedList.push(data)
      }
    }
  }
</script>
<style lang="less">
  .transfer {
    .ivu-tree-title-selected,
    .ivu-tree-title-selected:hover,
    .ivu-tree-title:hover {
      background-color:#D0D0D0;
    }
    .ivu-tree-title {
      vertical-align: middle;
      span {
        margin: 0 5px;
      }
      .ivu-icon {
        color: #2b85e4;
        font-size: 16px;
        &.ivu-icon-md-checkmark {
          display: none;
        }
      }
      &.ivu-tree-title-selected {

        /*.ivu-icon {*/
          /*&.ivu-icon-md-checkmark {*/
            /*display: inline-block;*/
            /*color: #19be6b;*/
          /*}*/
        /*}*/
      }
    }
  }
</style>
